import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { argTypesView } from "./helpers/helpers";

export const annotationsDocs= { source: { code: `annotations := map[string]string{"Label": "Sample annotation"}
component.NewAnnotations(annotations)`
}}
export const annotationsView = {
  config: {
    annotations: {
      ['Label']: 'Sample annotation',
    },
  },
  metadata: {
    type: 'annotations',
  },
}
export const AnnotationsStoryTemplate = args => ({
  template: `<app-view-annotations [view]= "view"></app-view-annotations>`,
  argTypes: argTypesView,
  props: {view: args.view},
});

<h1>Annotations component</h1>
<h2>Description</h2>

<p>The Annotations component is used to display non-identifying metadata of Kubernetes objects.
It styles a key pair value of strings.</p>
<h2>Example</h2>

<Meta title="Components/Annotations" argTypes = { argTypesView } />

<Canvas withToolbar>
  <Story name="Annotations component"
         parameters={{ docs: annotationsDocs }}
         args= {{ view: annotationsView }}>
    { AnnotationsStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Annotations component" />
